<template>
    <div class="GO-order-setting">
        <div class="page-box" v-show="pageShow">
            <div class="w w-box step-area">
                <span class="step-item" :class="{ active: item.active }" v-for="(item, index) in stepTitle" :key="index" @click="switchStep(index)">
                    <img :src="item.icon" />
                    <b>{{ item.name }}</b>
                    <hr v-if="index < stepTitle.length - 1" />
                </span>
            </div>
            <div class="w w-box con-area">
                <!--基本信息填写 start-->
                <div class="base-info-area" v-if="curStepIndex === 0">
                    <base-info ref="baseInfoSet" />
                </div>
                <!--基本信息填写 end-->
                <!--产品配置 start-->
                <div class="pro-info-area" v-if="curStepIndex === 1">
                    <product-info ref="productInfo" @changeShowPage="changeShowPage" />
                </div>
                <!--产品配置end-->
                <!--员工花名册 start-->
                <div class="staff-info-area" v-if="curStepIndex === 2">
                    <staff-info />
                </div>
                <!--员工花名册 end-->
                <!--量体信息 start-->
                <div class="measure-info-area" v-if="curStepIndex === 3">
                    <measure-info />
                </div>
                <!--量体信息 end-->
            </div>
            <div class="fixed-btn-box" :class="{ open: fixedOpen }" @click="fixedOpen = !fixedOpen">
                <span class="fixed-btn"></span>
                <ul class="nav-list">
<!--                    <li @click="drawer = true">产品列表</li>-->
                    <li @click="saveTemplates">放入模版</li>
                    <!--<li><router-link to="order-detail">预览订单</router-link></li>-->
                    <li><router-link :to="{path:'/MyOrderSubsystem/OrderDetalisGroup2',query:{order:storage.getItem('orderSn')}}">预览订单</router-link></li>
                    <li><router-link :to="{path:'/MyOrderSubsystem/OrderDetalisGroup3',query:{order:storage.getItem('orderSn')}}">确认订单</router-link></li>
                </ul>
            </div>
            <el-drawer title="公司已添加产品" :visible.sync="drawer" :with-header="false">
                <drawer-info />
            </el-drawer>
        </div>
        <clothingCustom v-if="!pageShow" @changeShowPage="changeShowPage" />
    </div>
</template>

<script>
    import {getAction} from "../../api/manage";

    let storage = window.localStorage;
    // 引入组件
    import baseInfo from './components/base-info';
    import productInfo from './components/product-info';
    import staffInfo from './components/staff-info';
    import measureInfo from './components/measure-info';
    import drawerInfo from './components/drawer-info';
    import clothingCustom from './components/clothing-custom';
    // 导入接口
    import { create_team_templateInfo, update_team_order } from '@/api/group-order';
    export default {
        components: {
            baseInfo,
            productInfo,
            staffInfo,
            measureInfo,
            drawerInfo,
            clothingCustom
        },
        data() {
            return {
                // 页面是否显示，当高定的时候不显示
                storage, // 包含订单信息
                pageShow: true,
                funtime:'',//及时
                stepTitle: [
                    {
                        icon: require('@/assets/img/group-order/u603.png'),
                        name: '基本信息填写',
                        active: true
                    },
                    {
                        icon: require('@/assets/img/group-order/u609.png'),
                        name: '产品配置',
                        active: false
                    },
                    {
                        icon: require('@/assets/img/group-order/u620.png'),
                        name: '员工花名册',
                        active: false
                    },
                    {
                        icon: require('@/assets/img/group-order/u615.png'),
                        name: '量体信息',
                        active: false
                    }
                ],
                curStepIndex: 0,
                fixedOpen: false,
                drawer: false
            };
        },
        mounted() {
            let that = this;
            let fun = function() {
                // that.saveTemplates();
                that.getOrderDetail();
                setTimeout(function() {
                    fun();
                }, 1000*60*2);
            };
            setTimeout(() => {
                fun();
            }, 1000*60*2);
        },
        // destroyed() {
        //     window.clearTimeout(this.fun);
        //     window.removeEventListener('popstate', this.goBack, false);
        // },
        methods: {
            // 获取团订订单详情
            getOrderDetail() {
                getAction(domain.publicUrl + "/teamOrder/getBaseTeamOrderDetail", {
                    'orderSn': storage.getItem('orderSn'),
                    'token': localStorage.getItem("token")
                }).then(res => {
                    if (res.data.code == '0') {
                        /*alert(res.data.data.status);*/
                        if(res.data.data.status=='0'){
                            this.updateTeamOrder();
                        }else {
                            // alert("易制毒")
                        }
                    }
                })
            },
            goBack() {
                this.$router.replace({
                    path:'/',
                    name:'home'
                })
            },
            /**
             * @Date: 2020-11-07 22:33:32
             * @LastEditors: qwguo
             * @description: 显示隐藏页面
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeShowPage(tag) {
                this.pageShow = !this.pageShow;
                if (tag == 'addClothingCustom') {
                    this.$refs.productInfo.getDepartmentProList();
                }
            },
            /**
             * @Date: 2020-11-07 22:31:51
             * @LastEditors: qwguo
             * @description: 步骤切换
             * @param {type} 参数说明
             * @return: 返回值
             */
            switchStep(index) {
                this.stepTitle.forEach((v, i) => {
                    v.active = i <= index;
                });
                this.curStepIndex = index;
            },
            /**
             * @Date: 2020-11-07 22:32:29
             * @LastEditors: qwguo
             * @description: 保存模版
             * @param {type} 参数说明
             * @return: 返回值
             */
            saveTemplates() {
                let that = this;
                let groupOrder_baseFrom = storage.getItem('groupOrder_baseFrom');
                if (groupOrder_baseFrom) {
                    groupOrder_baseFrom = JSON.parse(groupOrder_baseFrom);
                    groupOrder_baseFrom.orderName = groupOrder_baseFrom.orderName || '团定模板';
                    create_team_templateInfo({
                        token: storage.getItem('token'),
                        orderSn: storage.getItem('orderSn'),
                        customerId: storage.getItem('customerId'),
                        // orderName: '团定模板',
                        ...groupOrder_baseFrom
                    }).then(res => {
                        if (res.status == 200 && res.data.code == 0) {
                            that.$message.success('保存成功');
                        }
                    });
                }
            },
            /**
             * @Date: 2020-11-16 23:17:39
             * @LastEditors: qwguo
             * @description: 保存预览订单
             * @param {type} 参数说明
             * @return: 返回值
             */
            updateTeamOrder() {
                let that = this;
                let groupOrder_baseFrom = storage.getItem('groupOrder_baseFrom');
                if (groupOrder_baseFrom) {
                    groupOrder_baseFrom = JSON.parse(groupOrder_baseFrom);
                    groupOrder_baseFrom.orderName = groupOrder_baseFrom.orderName || '团定模板';
                    let j = {
                        token: storage.getItem('token'),
                        orderSn: storage.getItem('orderSn'),
                        customerId: storage.getItem('customerId'),
                        status: 0,
                        is_ding:0,
                        ...groupOrder_baseFrom
                    };
                    if (storage.getItem('customerId')) {
                        j.customerId = storage.getItem('customerId');
                    }
                    update_team_order(j).then(res => {
                        if (res.status == 200 && res.data.code == 0) {
                            // that.$message.success('保存成功');
                        }
                    });
                }
            }
        }
    };
</script>

<style lang="scss">
    .GO-order-setting {
        .step-area {
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            .step-item {
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                img {
                    width: 24px;
                    height: 24px;
                    filter: grayscale(0.5);
                    margin: 0 5px;
                }
                b {
                    font-size: 14px;
                    color: #ccc;
                    margin-right: 5px;
                    transition: all 0.2s linear;
                }
                hr {
                    height: 1px;
                    background-color: #ccc;
                    width: 55px;
                    border: 0;
                    transition: all 0.2s linear;
                }
                &.active {
                    b {
                        color: #000;
                    }
                    hr {
                        background-color: #000;
                    }
                }
            }
        }
        .con-area {
            margin-top: 30px;
            padding: 30px 0 30px;
        }
        .pro-info-area,
        .staff-info-area {
            margin: 0 40px;
        }
        .fixed-btn-box {
            position: fixed;
            left: 40px;
            bottom: 20px;
            display: flex;
            z-index: 10;
            .fixed-btn {
                cursor: pointer;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: url('~@/assets/img/group-order/u3869.svg') #555555 center center;
                z-index: 2;
            }
            .nav-list {
                z-index: 1;
                max-width: 0;
                overflow: hidden;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                background-color: white;
                transition: all 0.2s linear;
                opacity: 0;
                li {
                    font-size: 13px;
                    margin: 0 15px;
                    cursor: pointer;
                    white-space: nowrap;
                    &,
                    a {
                        color: #333;
                        text-decoration: none;
                    }
                }
            }
            &.open {
                .fixed-btn {
                    background: url('~@/assets/img/group-order/u3871.svg') #555555 center center;
                }
                .nav-list {
                    opacity: 1;
                    max-width: 500px;
                }
            }
        }
    }
</style>
